<template>
  <el-row type="flex" justify="center">
    <el-col>
      <el-row class="content-top-margin" type="flex" justify="center">
        <el-col :span="1">
          <i class="el-icon-back" @click="cancel"></i>
        </el-col>

        <el-col :span="16">
          <span>写日记</span>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-divider></el-divider>

          <el-row>
            <el-col :span="24" class="content-area">

              <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="120px" class="demo-ruleForm">
                <el-form-item label="标题" prop="title">
                  <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>

                <el-form-item label="天气" prop="weather">
                  <el-radio-group v-model="ruleForm.weather">
                    <el-radio-button label="sunny"><i class="el-icon-sunny">晴天</i></el-radio-button>
                    <el-radio-button label="cloudy"><i class="el-icon-cloudy">多云</i></el-radio-button>
                    <el-radio-button label="heavy-rain"><i class="el-icon-heavy-rain">暴雨</i></el-radio-button>
                    <el-radio-button label="light-rain"><i class="el-icon-light-rain">小雨</i></el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="心情" prop="feel">
                  <el-select v-model="ruleForm.feel" placeholder="选择您的心情">
                    <el-option label="开心" value="开心"></el-option>
                    <el-option label="难过" value="难过"></el-option>
                    <el-option label="一般" value="一般"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="内容" prop="content">
                  <el-input type="textarea" v-model="ruleForm.content" :rows="10"></el-input>
                </el-form-item>

                <el-form-item class="submit">
                  <el-button type="primary" @click="save('ruleForm')">保存</el-button>
                  <el-button @click="cancel">取消</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import constant from '../constant';

export default {
  name: "DiaryWrite",
  data() {
    return {
      no: this.$route.params.no,
      ruleForm:{
        title: '',
        content: '',
        weather: '',
        feel: ''
      },
      rules:{
        title:[
          {required: true, message: '请输入标题', trigger: 'blur'}
        ],
        content:[
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],
        weather:[
          {required: true, message: '请选择天气', trigger: 'chagne'} //修改时检测
        ],
        feel:[
          {required: true, message: '请选择您的心情', trigger: 'change'} //修改时检测
        ]
      }
    };
  },
  methods: {
    save(formName){
      this.$refs[formName].validate((valid) => {
        if(valid){
          let date = new Date();
          let router = this.$router;

          if(this.no!=null){  //路由器值，如果 no 值为空，
            let listItem ={
                          'no':this.no,
                          'title':this.ruleForm.title,
                          'content':this.ruleForm.content,
                          date,
                          'weather':this.ruleForm.weather,
                          'feel':this.ruleForm.feel
                          };
            this.$store.commit(constant.REVISE_DIARY, {list:listItem});
            this.$message({
              type:'info',
              message: '修改了日记'
            });
          }
          else{
            this.$store.state.list.push({
              'no': this.$store.state.no++,
              'title': this.ruleForm.title,
              'content': this.ruleForm.content,
              date,
              'weather':this.ruleForm.weather,
              'feel':this.ruleForm.feel
            });
            this.$message({
              type:'info',
              message: '写日记'
            });
          }
          router.push('/diary');
        }
        else{
          return false;
        }
      });
    },
    fetchData(){
      if(this.no != null){
        this.ruleForm.title = this.$store.state.list[this.no].title;
        this.ruleForm.content = this.$store.state.list[this.no].content;
        this.ruleForm.weather = this.$store.state.list[this.no].weather;
        this.ruleForm.feel = this.$store.state.list[this.no].feel;
      }
    },
    cancel() {
      let router = this.$router;
      if(this.no != null){
        router.back();
      }
      else{
        router.push('/diary');
      }
    }
  },
  created(){
    this.fetchData()
  }
}
</script>

<style scoped>
  .content-top-margin{
    margin-top:2%;
  }
  .content-area{
    padding: 0 5% 0 0;
  }
  .submit {
    text-align: center;
  }
</style>
